<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/frame/layui/css/layui.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/frame/static/css/style.css">
</head>
<body class="body">
	<!-- 工具集 -->
	<div class="my-btn-box">
		<span class="fl">
		 <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
		 <a class="layui-btn btn-add btn-default" id="btn-add">添加</a> 
		 <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
		</span> 
		<span class="fr"> <span class="layui-form-label" >搜索条件：</span>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" id="findDname" name ="findDname" placeholder="请输入搜索部门" class="layui-input">
			</div>
			<button id="btn-select"class="layui-btn mgl-20">查询</button>
		</span>
	</div>

	<!-- 表格 -->
	<table id="deptTable" class="layui-table" lay-filter="dept_table"></table>
	
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/frame/layui/layui.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/js/index.js"></script>
	<script type="text/javascript">
		layui.use([ 'table', 'form', 'layer' ],function() {
				// 操作对象
				var form = layui.form,
				table = layui.table, 
				layer = layui.layer, 
				$ = layui.jquery;

				// 表格渲染
				var tableIns = table.render({
				elem : '#deptTable' //指定原始表格元素选择器（推荐id选择器）
				,height : 500 //容器高度
				,cols : [ [ //标题栏
				{
					checkbox : true,
					sort : true,
					fixed : true,
					space : true
				}, {
					field : 'did',
					title : '编号',
					align : 'center',
					width : 100
				}, {
					field : 'dname',
					title : '部门名称',
					align : 'center',
					width : 160
				}, {
					field : 'dremark',
					title : '部门描述',
					align : 'center',
					width : 500
				}, {
					fixed : 'right',
					title : '编辑',
					width : 200,
					align : 'center',
					toolbar : '#barDemo'//这里的toolbar值是模板元素的选择器
				} 
				] ],
				id : 'dataCheck',
				url : '${pageContext.request.contextPath }/deptAction_findByPage.action?dis=1',
				method : 'post',
				page : true,
				limits : [ 5, 10, 20 ],
				limit : 5, //默认采用5
				loading : false, //是否显示加载 
			});
				
			//添加部门按钮
			$("#btn-add").click(function() {
				layer.open({
					type : 2,
					title : '添加部门',
					area : [ '400px', '300px' ],
					content :'${pageContext.request.contextPath }/page_dept_addDept.action' //这里content是一个普通的String
				});
			});
			
			//监听工具条
			table.on('tool(dept_table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'del') { //删除
						 //向服务端发送删除指令ve
						 //如果有未交接的员工则无法删除 还未完成
                         //可以删除
                         del_dept(obj);
				} else if (layEvent === 'edit') { //编辑
					//调用编辑的方法
					edit_dept(data);
				}
			});
			function del_dept(obj) {
                var data = obj.data;
                var info = '此操做会导致该部门下所有员工离职！<br />确定要撤销 <a style="color: red">' + data.dname + '</a> 吗？';

                layer.confirm(info, {icon: 3, title: '撤销部门'}, function (index) {
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('${pageContext.request.contextPath}/deptAction_deleteDept.action', {did: data.did},
                        function (result) {
                            if (result == 'success') {
                                layer.alert('撤销成功');
                                obj.del(); //删除对应行（tr）的DOM结构
                                //重新加载数据
                                tableIns.reload();
                            } else {
                                layer.alert('撤销失败');
                            }

                        });
                });
            }
			//修改部门
			function edit_dept(data) {
				layer.open({
					type : 2,
					title : '修改部门',
					area : [ '400px', '300px' ],
					content : '${pageContext.request.contextPath }/deptAction_getDeptId.action?did=' + data.did//这里content是一个普通的String
				});
			}
			// 获取选中行
			table.on('checkbox(dept_table)', function(obj) {
				console.log(obj.checked); //当前是否选中状态
				console.log(obj.data); //选中行的相关数据
				console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one

				layer.msg(obj.data.did);
			});
			$("#btn-delete-all").click(function() {
				layer.msg('拒绝删除');
			});
			//条件查询
			$("#btn-select").click(function() {
				var pw = $("#findDname").val();
				alert(pw);
			});
			// 刷新
			$('#btn-refresh').on('click', function() {
				tableIns.reload();
			});
		});
	</script>
	<!-- 表格操作按钮集 -->
	<script type="text/html" id=barDemo>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">撤销</a>
</script>
</body>
</html>